<template>
  <div class="airway_wrap">
    <div class="closePopover" @click="closePopover"></div>
    <div class="title">
      <p class="text">航路筛选</p>
    </div>
    <div class="content_box">
      <div class="item" v-for="(item, index) in filterData" :key="index">
        <div class="left">
          <span class="text">{{ item.title }}</span>
        </div>
        <div class="right">
          <div
            :class="['filterOption', filterOption.checked || filterOption.checked ? 'checkedItem' : '']"
            @click="itemClick(item, filterOption, filterIndex)"
            v-for="(filterOption, filterIndex) in item.filterOption"
            :key="filterIndex"
          >
            {{ filterOption.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

const emit = defineEmits(['close', 'item_click'])
const props = defineProps({
  data: null,
  popoverIndex: {
    type: Number,
    required: true
  }
})

// 绑定数据
const filterData = ref([
  {
    title: '场景',
    filterType: 'single',
    checkedValues: ['all'],
    filterOption: [
      {
        name: '全部',
        checked: true,
        value: 'all'
      },
      {
        name: '高端商务',
        checked: false,
        value: '高端商务'
      },
      {
        name: '空中的士',
        checked: false,
        value: '空中的士'
      },
      {
        name: '应急救援',
        checked: false,
        value: '应急救援'
      },
      {
        name: '空中游览',
        checked: false,
        value: '空中游览'
      },
      {
        name: '空中物流',
        checked: false,
        value: '空中物流'
      },
      {
        name: '医疗救护',
        checked: false,
        value: '医疗救护'
      },
      {
        name: '警务安防',
        checked: false,
        value: '警务安防'
      },
      {
        name: '安中巡检',
        checked: false,
        value: '安中巡检'
      }
    ],
    prop: 'airrouteTypeName'
  },
  {
    title: '企业',
    filterType: 'multi',
    checkedValues: ['all'],
    filterOption: [
      {
        name: '全部',
        checked: true,
        value: 'all'
      },
      {
        name: '苏州低空',
        checked: false,
        value: '苏州低空'
      },
      {
        name: '苏垦农业',
        checked: false,
        value: '苏垦农业'
      },
      {
        name: '云联智慧',
        checked: false,
        value: '云联智慧'
      },
      {
        name: '飞鹏',
        checked: false,
        value: '飞鹏'
      },
      {
        name: '苏州邮政',
        checked: false,
        value: '苏州邮政'
      },
      {
        name: '若尔航空',
        checked: false,
        value: '若尔航空'
      },
      {
        name: '半岛',
        checked: false,
        value: '半岛'
      },
      {
        name: '丰翼',
        checked: false,
        value: '丰翼'
      },
      {
        name: '东部通航',
        checked: false,
        value: '东部通航'
      },
      {
        name: '爱上飞行',
        checked: false,
        value: '爱上飞行'
      }
    ],
    prop: 'operationUnit'
  },
  {
    title: '航路等级',
    prop: 'airrouteLevelName',
    filterType: 'multi',
    checkedValues: ['all'],
    filterOption: [
      {
        name: '全部',
        checked: true,
        value: 'all'
      },
      {
        name: '市内主干航路',
        checked: false,
        value: '市内主干航线'
      },
      {
        name: '市内支干航路',
        checked: false,
        value: '市内支线航线'
      },
      {
        name: '跨市航路',
        checked: false,
        value: '跨市航线'
      }
    ]
  },
  {
    title: '航路性质',
    checkedValues: ['all'],
    prop: 'belongTypeId',
    filterType: 'multi',
    filterOption: [
      {
        name: '全部',
        checked: true,
        value: 'all'
      },
      {
        name: '公用航路',
        checked: false,
        value: '1'
      },
      {
        name: '无人机航路',
        checked: false,
        value: '2'
      }
    ]
  },
  {
    title: '飞行器',
    checkedValues: ['all'],
    prop: 'aerocraftType',
    filterType: 'multi',
    filterOption: [
      {
        name: '全部',
        checked: true,
        value: 'all'
      },
      {
        name: '有人机',
        checked: false,
        value: '1'
      },
      {
        name: '无人机',
        checked: false,
        value: '2'
      }
    ]
  },
  {
    title: '是否开通',
    prop: 'activateType',
    checkedValues: ['all'],
    filterType: 'single',
    filterOption: [
      {
        name: '全部',
        checked: true,
        value: 'all'
      },
      {
        name: '已开通航路',
        checked: false,
        value: '1'
      },
      {
        name: '未开通航路',
        checked: false,
        value: '0'
      }
      // {
      //   name: '规划',
      //   checked: false,
      //   value: '0'
      // }
    ]
  }
])

// 选项点击
const itemClick = (pItem: any, item: any, itemIndex: any) => {
  //console.log('选项：', item, pItem, itemIndex)
  // 全部选项原始状态
  let allOriState = pItem.filterOption[0].checked
  // 默认为多选
  pItem.filterType = pItem.filterType ? pItem.filterType : 'multi'
  // 多选，点击取反，单选点击始终选中
  if (pItem.filterType == 'multi') {
    item.checked = !item.checked
  } else {
    item.checked = true
  }
  //点击的是全部
  if (itemIndex == 0) {
    pItem.filterOption[0].checked = true
    if (!allOriState) {
      //全选
      for (let index = 1; index < pItem.filterOption.length; index++) {
        const element = pItem.filterOption[index]
        element.checked = false
      }
      pItem.checkedValues = ['all']
    }
  } else {
    //点击的不是全部
    if (item.checked) {
      pItem.filterOption[0].checked = false
      //非全部-多选-选中
      if (pItem.filterType == 'multi') {
        pItem.checkedValues.push(item.value)
        //先删除all
        if (pItem.checkedValues.indexOf('all') >= 0) {
          pItem.checkedValues.splice(0, 1)
        }
      } else {
        //非全部-单选-选中
        for (let index = 1; index < pItem.filterOption.length; index++) {
          const element = pItem.filterOption[index]
          if (element.name != item.name) {
            element.checked = false
          }
        }
        pItem.checkedValues = [item.value]
      }
    } else {
      // 非全部-多选-取消选中
      if (pItem.filterType == 'multi') {
        pItem.checkedValues.splice(pItem.checkedValues.indexOf(item.value), 1)
      } else {
        //非全部-单选-取消选中,则选中全部
        pItem.filterOption[0].checked = true
        pItem.checkedValues = ['all']
      }
    }
    //如果是多选，且子节点都选中，则选中全部，子选节不选中
    if (pItem.filterType == 'multi' && pItem.checkedValues.length == pItem.filterOption.length - 1) {
      pItem.filterOption[0].checked = true
      for (let index = 1; index < pItem.filterOption.length; index++) {
        const element = pItem.filterOption[index]
        element.checked = false
      }
      pItem.checkedValues = ['all']
    }
  }
  // 控制输出结果
  let result: any = {}
  filterData.value.forEach((item: any, index: any) => {
    result[item.prop] = item.checkedValues
    if (item.checkedValues.length == 0) {
      result[item.prop] = ['all']
      item.filterOption[0].checked = true
    }
  })
  // console.log('选项2：', item, pItem, filterData.value, pItem.checkedValues, result)
  // 事件转发
  emit('item_click', result)
}

// 关闭窗口
const closePopover = () => {
  // 关闭事件传递
  emit('close', { popoverIndex: props.popoverIndex, data: props.data })
}

onMounted(() => {})
</script>

<style scoped lang="scss">
.airway_wrap {
  width: 61.467rem;
  height: 42.5rem;
  // height: 30.5rem;
  background: url('../assets/pop_bg_airway.png') no-repeat 0 0 / 100% 100%;
  position: relative;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: OPPOSans;
  color: #ffffff;

  .closePopover {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.235rem;
    height: 1.646rem;
    z-index: 9;
    cursor: pointer;
  }

  .title {
    position: absolute;
    left: 0.186rem;
    top: 1.879rem;
    width: 39.45%;
    height: 6.76%;
    background: url('../assets/airway_title.png') no-repeat 0% 100% / 100% 81.34%;

    .text {
      margin-left: 4.142rem;
      height: 2.2rem;
      line-height: 2.2rem;
      font-size: 1.8rem;
    }
  }

  .content_box {
    position: absolute;
    left: 2.17rem;
    top: 5.634rem;
    width: 58.8rem;

    .item {
      display: flex;
      width: 100%;

      .left {
        margin-top: 0.8rem;
        width: 10.8rem;
        height: 2rem;
        line-height: 2rem;
        background: url('../assets/airway_left_bg.png') no-repeat 0 0 / 100% 100%;

        .text {
          margin-left: 1.45rem;
        }
      }

      .right {
        display: flex;
        flex-wrap: wrap;
        width: 48rem;

        .filterOption {
          cursor: pointer;
          margin-bottom: 0.4rem;
          padding: 0 2rem;
          height: 3.6rem;
          line-height: 3.6rem;
        }

        .checkedItem {
          // font-size: 1.5rem;
          background: url('../assets/airway_item_checked_bg.png') no-repeat 0 0 / 100% 100%;
          color: #3afbf7;
        }
      }
    }
  }
}
</style>
